  <template>
  <div class="box">
    <div class="warps">
      <div class="hint">
        <img src="../../assets/imgs/hint.png" alt="提示图片" />
        <span>带有*的填写项为必须填写内容若用户没有填写则无法进行下一步操作</span>
      </div>
    </div>
    <div class="per-tab">
      <span class="now-position">当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item to="/business/allBusiness/register?id=1" @click.native="routeChange">业务中心</el-breadcrumb-item>
        <el-breadcrumb-item to="/business/allBusiness/businessclou" v-if="$route.query.id!=1">商标后续</el-breadcrumb-item>
        <el-breadcrumb-item  class="el-icon-arrow-effect"><strong>{{tle}}</strong></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-steps class="steps" :active="number" align-center>
      <el-step :title="number==0?'步骤1(进行中)':'步骤1(完成)'" description="请上传必要的证明文件"></el-step>
      <el-step :title="number==1?'步骤2(进行中)':number<1?'步骤2(未开始)':'步骤2(完成)'" description="请完善和更正必要信息"></el-step>
      <el-step :title="number==2?'步骤3(进行中)':number<2?'步骤3(未开始)':'步骤3(完成)'" description="请填写申请业务信息"></el-step>
    </el-steps>
    <!--<el-steps v-if="$store.state.stateJdg" class="steps" :active="number-1" align-center>-->
    <!--<el-step title="步骤1" description="请完善和更正必要信息"></el-step>-->
    <!--<el-step title="步骤2" description="请填写申请业务信息"></el-step>-->
    <!--&lt;!&ndash; <el-step title="步骤3" description="长很长的描述性文字"></el-step>-->
    <!--<el-step title="步骤4" description="很长的描述性文字"></el-step>-->
    <!--<el-step title="步骤5" description="长很长的描述性文字"></el-step>&ndash;&gt;-->
    <!--</el-steps>-->
    <!-- <keep-alive> -->
    <!--<component :is="moduleItem" @wp="ww" ></component>-->
    <component :is="moduleItem" @wp="ww" v-if="show_child"></component>
    <!-- </keep-alive> -->
  </div>
</template>

<script>
function GetRequest() {
  // console.log(location.search);
  var url = location.search; //获取url中"?"符后的字串
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    var strs = str.split("&");
    for (var i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
    }
  }
  return theRequest;
}
//当组件在被加载的时候对其进行判断，选择需要引入的表单
var BashStep3 = (resolve) => {
  //  let a = location.search.substring(4);
  let url = GetRequest();
  return require([`./BashStepForm${url["id"]}`], resolve);
};
import BashStep1 from "./BashStep1";
import BashStep2 from "./BashStep2";
import urlData from "../../assets/js/urlData.json";

export default {
  data() {
    return {
      judegs: "",
      moduleArr: [BashStep1, BashStep2, BashStep3],
      select: "",
      show_child: true, //当时修改时,等待异步完成
      number: 0,
      //面包屑动态变量
      tle: "",
    };
  },
  async created() {
    //每次进入清空之前的数据
    this.$store.commit("storeDatas", {});
    this.$store.commit("setAltData", {});
    this.$store.commit("setPicType", 0);
    this.$store.commit("setCompanyCardInfo", {});
    this.$store.commit("setIdCardInfo", {});
    if (!this.$route.query.data_id) return;
    ////console.log('我是urlData', urlData, this.$store.state.storeId);
    this.show_child = false;
    let url = urlData[this.$route.query.id];
    await this.$http
      .get("trademark" + url.inquire, {
        params: { id: this.$route.query.data_id },
      })
      .then((result) => {
        let data = result.data.data;
        data.urls = url.set;
        let company_card_info = {};
        company_card_info.url =
          data.public.busimg != "undefined" ? data.public.busimg : null; //营业执图片地址
        company_card_info.address = data.public.busAddress;
        company_card_info.name = data.public.busName;
        company_card_info.identCode = data.public.busCode;
        company_card_info.repLegal = "";
        let id_card_info = {};
        id_card_info.id_card =
          data.public.idcardface != "undefuined"
            ? data.public.idcardface
            : null; //正面
        id_card_info.url =
          data.public.idcardimg != "undefined" ? data.public.idcardimg : null; //正反面
        id_card_info.address = "";
        id_card_info.name = data.public.appName;
        id_card_info.names = data.public.appName;
        id_card_info.idnumber = data.public.cardNum;

        this.$store.commit("setPicType", data.public.appliType);
        this.$store.commit("setCompanyCardInfo", company_card_info);
        this.$store.commit("setIdCardInfo", id_card_info);
        this.$store.commit("type", data.public.appliType);
        this.$store.commit("setPicType", data.public.appliType);
        this.$store.commit("setAltData", data);
        this.$store.commit("setStateJeg", true);
        this.show_child = true;
        // location.reload()
      });
  },
  mounted() {
   
    this.tle = urlData[this.$route.query.id]["title"];
   
  },
  watch:{
    '$route'(){
      this.tle = urlData[this.$route.query.id]["title"];
    }
  },
  computed: {
    moduleItem() {
      let number = this.number;
      return this.moduleArr[number];
      if (this.judegs) {
        if (number == 1 || number == 2) {
          number = 1;
          return this.moduleArr[number];
        }
        if (number == 3 || number == 4) {
          number = 2;
          return this.moduleArr[number];
        }
      }
      return this.moduleArr[number];
    },
  },
  methods: {
    routeChange(){
      this.$store.commit("changeAllBusState", "/business/allBusiness/register1")
    },
    out(val) {
      this.number = val;
    },
    ww(val, tle) {
      this.number = val;
      //                this.tle = tle;
    },
  },
  components: {
    BashStep1,
    BashStep2,
    BashStep3,
  },
  beforeRouteLeave(to, form, next) {
    this.$store.commit("setStateJeg", false);

    next();
  },
  destroyed() {
    BashStep3 = (resolve) => {
      //                let a = location.search.substring(4);
      //                return require([`./BashStepForm${a}`], resolve);
      let url = GetRequest();
      // console.log(url);
      return require([`./BashStepForm${url["id"]}`], resolve);
    };
  },
};
</script>
<style lang="less">
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  width: 100%;
  background-color: #fff;
  // min-height: 800px;
  .warps {
    width: 100%;
    padding-bottom: 22px;
    background-color: #f7f7f7;
  }
  .hint {
    display: flex;
    justify-content: flex-start;
    padding: 15px 20px;
    width: 100%;
    background-color: #ffefea;
    font-size: 14px;
    color: #f96900;
    img {
      margin-right: 10px;
    }
  }
  .tle {
    margin: 20px 0px;
    font-size: 24px;
  }
  .el-steps {
    width: 74%;
    height: 100px;
    margin: 0 auto;
    .el-step__head{
      width: 20vw;
    }
    .el-step.is-horizontal{
      .is-process{
        border-color: #f96900;
        color: #f96900;
      }
      .is-finish {
        border-color: #333;
        color: #333;
        .el-step__line{
          border-bottom: 1px dashed #333;
          /deep/.el-step__line-inner{
            border-top: 1px dashed #333;
            height: 1px;
            border-bottom: none;
          }
        }
      }
      .el-step__line{
        height: 1px;
        border-bottom: 1px dashed #d9d9d9;
        background: transparent;
        .el-step__line-inner{
          background: transparent;
          border-style: dashed;
          height: 1px;
          border-bottom: none;
        }
      }
      .el-step__icon.is-text{
        border:1px solid;
        .el-step__icon-inner{
          font-weight: normal;
        }
      }
    }
  }
}

.per-tab {
  display: flex;
  align-items: center;
  color: #666666;
  font-size: 16px;
  margin: 0px 0 39px;
  padding: 28px 20px;
  width: 100%;
  border-bottom: 1px solid #eee;
  .now-position{
    display: inline-block;
    line-height: 1;
  }
  .el-icon-arrow-right,
  .el-breadcrumb__inner {
    font-size: 14px;
    font-weight: 500;
  }
}
</style>